<template>
	<view class="box">
		<view class="box1">
			<view class="back" @click="">
				<image src="@/static/image/后退.png"></image>
			</view>
		</view>

		<view class="box2">
			<view class="box2-top">
				<view class="box2-top1" @click="msg">
					<image :src="tuimage" mode=""></image>
				</view>
				<view class="box2-top2">
					<view class="top2-top">爱吃草莓蛋糕的懒洋洋</view>
					<view class="top2-bottom">普通用户</view>
				</view>
				<view class="box2-top3">
					<image src="../../static/image/_消息.png"></image>
				</view>
			</view>
			<view class="box2-center">
				<view class="box2-center1">会员中心</view>
				<view class="box2-center2"> | 首次开通会员，领取66元专享红包！</view>
				<view class="box2-center3">立即开通</view>
			</view>
			<view class="box2-bottom">
				<ul class="box2-bottom1">
					<li>
						<dt><span style="font-size: 24rpx;">￥</span>0</dt>
						<dd>余额</dd>
					</li>
					<li>
						<dt>3</dt>
						<dd>优惠卷</dd>
					</li>
					<li>
						<dt>0</dt>
						<dd>金额</dd>
					</li>
					<li>
						<dt><span style="font-size: 24rpx;">￥</span>4</dt>
						<dd>收益</dd>
					</li>
				</ul>
			</view>
		</view>

		<view class="box3">
			<view class="box3-top">
				<view class="box3-top1">我的订单</view>
				<view class="box3-top2">全部订单<image src="../../static/image/下一项.png"></image>
				</view>
			</view>
			<view class="box3-bottom">
				<view class="box3-bottom1" v-for="(item,index) in indent" :key="index">
					<image :src="item.image" />
					<view class="box3-bottom2">{{ item.name }}</view>
				</view>
			</view>
		</view>
		
		<view class="box3">
			<view class="box3-top">
				<view class="box3-top1">我的服务</view>
			</view>
			<view class="box3-bottom">
				<view class="box3-bottom1" v-for="(item,index) in indent1" :key="index">
					<image :src="item.image" />
					<view class="box3-bottom2" style="font-size: 22rpx;">{{ item.name }}</view>
				</view>
			</view>
		</view>
		
		<view class="box4">
			<view class="box4-top">安全中心</view>
			<view v-for="(item,index) in secure" :key="index" class="box4-center">
				<view class="box4-center1">
					<image :src="item.image"></image>
					<view class="box4-center2">{{ item.text }}</view>
				</view>
				<view class="box4-center3"><image :src="item.image1"></image></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tuimage: 'http://tmp/7WLxVimAvFiHf9728c40700b319b3853856a040ae33f.jpg',
				indent: [{
						id: 1,
						name: '待支付',
						image: '../../static/image/配送.png'
					},
					{
						id: 2,
						name: '待配送',
						image: '../../static/image/配送.png'
					},
					{
						id: 3,
						name: '配送中',
						image: '../../static/image/配送.png'
					},
					{
						id: 4,
						name: '待评价',
						image: '../../static/image/配送.png'
					},
					{
						id: 5,
						name: '售后',
						image: '../../static/image/配送.png'
					}
				],
				indent1: [{
						id: 1,
						name: '积分商城',
						image: '../../static/image/收藏.png'
					},
					{
						id: 2,
						name: '商品收藏',
						image: '../../static/image/收藏.png'
					},
					{
						id: 3,
						name: '推荐有礼',
						image: '../../static/image/收藏.png'
					},
					{
						id: 4,
						name: '助力免费',
						image: '../../static/image/收藏.png'
					}
				],
				secure:[
					{id:1,image:'../../static/image/客服.png',text:'客服与帮助',image1:'../../static/image/下一项.png'},
					{id:2,image:'../../static/image/客服.png',text:'收获地址',image1:'../../static/image/下一项.png'},
					{id:3,image:'../../static/image/客服.png',text:'设置',image1:'../../static/image/下一项.png'}
				]
			}
		},
		methods: {
			msg() {
				let t = this;
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						t.tuimage = res.tempFilePaths[0]
						// console.log(t.tuimage)
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.box {
		background-color: #f5f5f5;

		.box1 {
			background-image: linear-gradient(#cdf1dd, #f5f5f5);
			height: 30vh;
			border-radius: 35rpx 35rpx 0 0;

			.back {
				image {
					padding-left: 2vh;
					width: 4vh;
					height: 4vh;
					margin-top: 5vh;
				}
			}
		}

		.box2 {
			width: 90%;
			margin: auto;
			background-color: #fff;
			height: 480rpx;
			margin-top: -17vh;
			padding-top: 20rpx;
			border-radius: 25rpx;
			margin-bottom: 30rpx;

			.box2-top {
				width: 85%;
				margin: auto;
				margin-top: 40rpx;
				margin-bottom: 60rpx;
				display: flex;
				justify-content: space-between;

				.box2-top1 {
					width: 8vh;
					height: 8vh;
					border-radius: 50%;
					border: 1px solid #3eb874;

					image {
						width: 8vh;
						height: 8vh;
						border-radius: 50%;
					}
				}

				.box2-top2 {
					.top2-top {
						font-weight: bolder;
						font-size: 32rpx;
					}

					.top2-bottom {
						background-color: #3eb874;
						color: #fff;
						width: 12vh;
						margin-top: 1vh;
						border-radius: 10rpx;
						padding: 10rpx 15rpx;
						text-align: center;
					}
				}

				.box2-top3 {
					image {
						margin-top: 2vh;
						width: 3.5vh;
						height: 3.5vh;
					}
				}
			}

			.box2-center {
				background-image: linear-gradient(to right bottom, #40ba76, #7feeb0);
				width: 100%;
				height: 6vh;
				padding-left: 2vh;
				border-radius: 15rpx;
				position: relative;
				display: flex;
				margin-bottom: 30rpx;

				.box2-center1 {
					color: #fff;
					line-height: 6vh;
					font-weight: bold;
					font-size: 32rpx;
				}

				.box2-center2 {
					color: #fff;
					font-size: 22rpx;
					line-height: 6vh;
				}

				.box2-center3 {
					position: absolute;
					top: 1.5vh;
					right: 1vh;
					background-color: #fff;
					color: #6fc596;
					padding: 5rpx 10rpx;
					border-radius: 20rpx;
				}
			}

			.box2-bottom {
				width: 85%;
				margin: auto;

				.box2-bottom1 {
					display: flex;
					justify-content: space-between;

					li {
						width: 20%;
						text-align: center;

						dt {
							color: #4dc27d;
							font-weight: bold;
							font-size: 40rpx;
						}

						dd {
							font-weight: bolder;
						}
					}
				}
			}
		}

		.box3 {
			width: 90%;
			margin: auto;
			height: 17vh;
			border-radius: 15rpx;
			background-color: #fff;
			margin-bottom: 30rpx;
			.box3-top {
				padding-top: 20rpx;
				display: flex;
				justify-content: space-between;
				width: 90%;
				margin: auto;
				margin-bottom: 40rpx;
				.box3-top1 {
					font-weight: bolder;
				}

				.box3-top2 {
					display: flex;

					image {
						width: 2.5vh;
						height: 2.5vh;
					}
				}
			}

			.box3-bottom {
				width: 85%;
				margin: auto;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-bottom: 20rpx;
				.box3-bottom1 {
					width: 16%;
					image {
						width: 6vh;
						height: 6vh;
						border-radius: 100%;
					}
					.box3-bottom2 {
						text-align: center;
						font-weight: bolder;
					}
				}
			}
		}
		
		.box4 {
			width: 90%;
			margin: auto;
			border-radius: 15rpx;
			background-color: #fff;
			margin-bottom: 30rpx;
			.box4-top {
				padding-top: 20rpx;
				width: 90%;
				margin: auto;
				margin-bottom: 30rpx;
				font-weight: bolder;
				font-size: 34rpx;
			}
			.box4-center{
				width: 90%;
				margin: auto;
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				.box4-center1{
					display: flex;
					image{
						width: 4vh;
						height: 4vh;
					}
					.box4-center2{
						font-weight: bolder;
						margin-left: 2vh;
						line-height: 57rpx;
					}
				}
				
				.box4-center3{
					image{
						width: 4vh;
						height: 4vh;
					}
				}
			}
		}
	}
</style>